<template>
  <div class="app-container">
    <el-tabs
      v-model="tab"
      @tab-click="tabsChange"
      v-if="userInfo.userType == 1"
    >
      <el-tab-pane label="全部订单" name="0"></el-tab-pane>
      <el-tab-pane
        :label="`待支付(${tabStatus.toBePaid || 0})`"
        name="1,4"
      ></el-tab-pane>
      <el-tab-pane
        :label="`待发货(${tabStatus.toBeShipped || 0})`"
        name="16"
      ></el-tab-pane>
      <el-tab-pane
        :label="`待确认(${tabStatus.toBeConfirmed || 0})`"
        name="13"
      ></el-tab-pane>
      <el-tab-pane
        :label="`待完成(${tabStatus.toBeCompleted || 0})`"
        name="10,11,14,17,19,21"
      ></el-tab-pane>
      <el-tab-pane
        :label="`待退款(${tabStatus.pendingRefund || 0})`"
        name="6,7,8"
      ></el-tab-pane>
      <el-tab-pane label="成功的订单" name="12,15,18,20"></el-tab-pane>
      <el-tab-pane label="关闭的订单" name="2,8,9"></el-tab-pane>
    </el-tabs>

    <!-- 筛选区域 -->
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="likeOrderId">
        <el-input
          v-model="list.filter.likeOrderId"
          placeholder="搜索订单号"
          clearable
        />
      </el-form-item>
      <el-form-item prop="productName">
        <el-input
          v-model="list.filter.productName"
          placeholder="搜索商品名称"
          clearable
        />
      </el-form-item>
      <el-form-item prop="purchaserName">
        <el-input
          v-model="list.filter.purchaserName"
          placeholder="搜索联系人姓名"
          clearable
        />
      </el-form-item>
      <el-form-item prop="purchaserPhone">
        <el-input
          v-model="list.filter.purchaserPhone"
          placeholder="搜索联系人手机号"
          clearable
        />
      </el-form-item>
      <el-form-item prop="payNo">
        <el-input
          v-model="list.filter.payNo"
          placeholder="搜索支付单号"
          clearable
        />
      </el-form-item>
      <el-form-item v-if="isPintai" prop="belongMerchantId">
        <merchantSelect
          v-model="list.filter.belongMerchantId"
          noPermission
          placeholder="所属商户"
        />
      </el-form-item>
      <!-- <el-form-item v-else prop="belongSubMerchantId">
        <KiSelect
          v-model="list.filter.belongSubMerchantId"
          :options="submerchantOpt"
          :props="{ value: 'subMchId', label: 'name' }"
          placeholder="所属店铺"
        />
      </el-form-item>
      <el-form-item prop="saleMerchantId">
        <merchantSelect
          v-model="list.filter.saleMerchantId"
          noPermission
          placeholder="销售商户"
        />
      </el-form-item> -->
      <el-form-item prop="businessTypeId">
        <KiSelect
          v-model="list.filter.businessTypeId"
          :options="productTypeOpt"
          :props="{ value: 'id', label: 'name' }"
          placeholder="商品类型"
        />
      </el-form-item>
      <el-form-item v-if="!tab || tab == 0" prop="statusArray">
        <KiSelect
          v-model="list.filter.statusArray"
          :options="orderStatus"
          placeholder="订单状态"
          multiple
          collapse-tags
        />
      </el-form-item>
      <el-form-item prop="triggerOperationArray" v-if="!tab || tab == 0">
        <KiSelect
          v-model="list.filter.triggerOperationArray"
          :options="orderStatusType"
          placeholder="订单状态类型"
          multiple
          collapse-tags
        />
      </el-form-item>
      <el-form-item prop="payStatusArray">
        <KiSelect
          v-model="list.filter.payStatusArray"
          :options="payStatus"
          placeholder="支付状态"
          multiple
          collapse-tags
        />
      </el-form-item>
      <el-form-item prop="thirdStatusArray">
        <KiSelect
          v-model="list.filter.thirdStatusArray"
          :options="thirdStatus"
          placeholder="票务状态"
          multiple
          collapse-tags
        />
      </el-form-item>
      <el-form-item prop="endOrderTime">
        <TimeRangePicker
          :start.sync="list.filter.beginOrderTime"
          :end.sync="list.filter.endOrderTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date-time"
          placeholder="下单开始时间/下单结束时间"
        />
      </el-form-item>
      <el-form-item prop="useEndDate">
        <TimeRangePicker
          :start.sync="list.filter.useStartDate"
          :end.sync="list.filter.useEndDate"
          type="date-time"
          placeholder="预定开始时间/预定结束时间"
        />
      </el-form-item>
      <el-form-item prop="endCompleteTime">
        <TimeRangePicker
          :start.sync="list.filter.startCompleteTime"
          :end.sync="list.filter.endCompleteTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date-time"
          placeholder="订单完成开始时间/订单完成结束时间"
        />
      </el-form-item>
      <el-form-item prop="payMethod">
        <KiSelect
          v-model="list.filter.payMethod"
          :options="payMethodList"
          placeholder="支付方式"
        />
      </el-form-item>
      <el-form-item prop="discountOrder">
        <KiSelect
          v-model="list.filter.discountOrder"
          :options="[
            { dataName: '是', dataValue: '1' },
            { dataName: '否', dataValue: '0' }
          ]"
          placeholder="优惠订单"
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 分页,表格头部按钮 -->
    <div class="table-operation">
      <span>
        <ExportExcel
          url="/sot-admin-api/order/procure/downloadOrderList"
          name="导出列表"
          :param="list.filter"
        />
      </span>
      <!-- 分页 -->
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <!-- 表格 -->
    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="商品名称" prop="productName" width="140" />
      <el-table-column label="订单号" prop="orderId" width="140" />
      <el-table-column label="支付单号" prop="payNo" width="140" />
      <el-table-column label="支付方式" prop="payMethod" width="140">
        <template v-slot="{ row }">
          {{ row.payMethod.toString() | $value2label(payMethodList) }}
        </template>
      </el-table-column>
      <el-table-column label="商品类型" prop="businessTypeName" width="80" />
      <el-table-column label="商品单价(元)" width="110">
        <template v-slot="{ row }">
          {{ (row.currentPrice / row.quantity) | $cent2yuan }}
        </template>
      </el-table-column>
      <el-table-column label="商品数量" prop="quantity" width="80" />
      <el-table-column label="优惠金额(元)" prop="discountPrice" width="110">
        <template v-slot="{ row }">
          <span>{{ row.discountPrice | $cent2yuan }}</span>
        </template>
      </el-table-column>

      <el-table-column label="平台补差(元)" width="110">
        <template v-slot="{ row }">
          <span>{{ row.makeUpDifferenceAmount | $cent2yuan }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单总价(元)" width="110">
        <template v-slot="{ row }">
          <span>{{ row.currentPrice | $cent2yuan }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实付金额(元)" width="110">
        <template v-slot="{ row }">
          <span>{{ row.paidPrice | $cent2yuan }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实收金额(元)" width="110">
        <template v-slot="{ row }">
          <span>{{ row.netReceiptsPrice | $cent2yuan }}</span>
        </template>
      </el-table-column>

      <!-- v-if="isPintai" -->
      <el-table-column
        label="所属店铺"
        prop="belongSubMerchantName"
        width="140"
      />
      <el-table-column label="所属商户" prop="belongMerchantName" width="140" />
      <el-table-column
        label="销售店铺"
        prop="saleSubMerchantName"
        width="140"
      />
      <el-table-column label="销售商户" prop="saleMerchantName" width="140" />
      <el-table-column label="状态" prop="orderStatusName" />
      <el-table-column label="支付状态" prop="payStatusName" width="80" />
      <el-table-column label="票务状态" prop="thirdStatusName" width="80" />
      <el-table-column label="预订人/收货人信息" width="140" align="left">
        <template v-slot="{ row }">
          <!-- 预订人 -->
          <span>
            <i class="el-icon-user-solid"></i>
            {{ row.purchaserName }}
          </span>
          <!-- 电话 -->
          <div v-if="row.purchaserPhone">
            <i class="el-icon-phone"></i>
            {{ row.purchaserPhone }}
          </div>
          <!-- 省市,收货地址 -->
          <div
            v-if="
              row.receiptInfo &&
                (row.receiptInfo.areaName || row.receiptInfo.address)
            "
          >
            <i class="el-icon-s-home"></i>
            {{ row.receiptInfo.areaName }}，{{ row.receiptInfo.address }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" prop="orderTime" width="100" />
      <el-table-column label="预定时间" prop="useStartTime" width="100">
        <template v-slot="{ row }">
          <span v-if="row.businessTypeId == 4">
            {{ row.useStartTime.split(' ')[0] }}
          </span>
          <span v-else>{{ row.useStartTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" prop="completeTime" width="100" />
      <el-table-column label="操作" width="200" fixed="right">
        <template v-slot="{ row }">
          <auth-button name="查看" @click="$refs.viewPage.open(row.orderId)" />
          <ExportExcel
            url="/sot-admin-api/order/procure/downloadOrderDetail"
            name="导出详情"
            :param="{
              orderId: row.orderId
            }"
            type="text"
            icon="-"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <viewPage ref="viewPage"></viewPage>
  </div>
</template>
<script>
import API from '@/views/merchant/order/components/api'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import viewPage from '@/views/merchant/order/components/viewPage'
import merchantSelect from '@/components/merchantSelect'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import orderDict from '@/views/merchant/order/components/orderDict.js'
let _this = null

export default {
  components: {
    viewPage,
    merchantSelect
  },
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter(
      {
        urlPrefix: 'sot-admin-api/order/procure',
        axiosConfig: {
          getList: {
            url: 'queryOrderList'
          }
        },
      },
      {
        afterGetList () {
          let filter = _this.$lo.cloneDeep(_this.list.filter)
          delete filter.pageNo
          delete filter.pageSize
          delete filter.status
          delete filter.statusArray
          // tab标签状态数
          _this
            .$POST('/sot-admin-api/order/procure/queryStatusCount', filter)
            .then(({ data }) => {
              if (data) _this.tabStatus = data
            })
          //_this.computeTableHeight() // 计算页面高度
        }, // 请求列表之后
        initialListFilter() {
          return {
            beginOrderTime: parseTime(
              new Date(new Date() - 1000 * 60 * 60 * 24 * 60)
            ),
            endOrderTime: parseTime(new Date())
          }
        }
      }
    ),
  data () {
    return {
      tableData: [],
      tab: '',
      tabStatus: {},
      submerchantOpt: [], //所属店铺
      ...orderDict, //支付方式
      updateListWait: false //更新列表队列等待, 防止多次更新
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    isPintai () {
      //是否平台
      return this.userInfo.userType == 0
    }
  },
  created () {
    _this = this
    // 下拉选项
    if (!this.isPintai) {
      // 所属店铺
      API.getSubmerchant({
        merchantId: this.userInfo.merchantId
      }).then(data => {
        this.submerchantOpt = data
      })
    }
  },
  methods: {
    /**
     * 构建接口订单状态参数
     * @param status {String} 订单状态
     * @param statusArray {Array} 订单状态集合
     */
    tabsChange (tab) {
      const tabStr = tab.name == 0 ? '' : tab.name
      if (tabStr.indexOf(',') > 0) {
        delete this.list.filter.status
        this.list.filter.statusArray = tabStr.split(',')
      } else {
        delete this.list.filter.statusArray
        this.list.filter.status = tabStr
      }
      this.getList()
    }
  }
}
</script>
